<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Event Object Compatibility</title>
    <script>
        // 页面加载完成后执行
        window.onload = function () {
            // 获取页面中的两个元素
            var areaDiv = document.getElementById("areaDiv");     // 鼠标移动监听区域
            var showMsg = document.getElementById("showMsg");   // 显示事件信息的区域

            // 为 areaDiv 添加鼠标移动事件监听器
            areaDiv.onmousemove = function (e) {
                /**
                 * 兼容性处理：获取事件对象
                 * 标准浏览器自动传入 event 参数，IE 中需使用 window.event
                 */
                e = e || window.event;

                /**
                 * 兼容性处理：获取触发事件的目标元素
                 * target 适用于标准浏览器，srcElement 适用于 IE8 及以下
                 */
                var target = e.target || e.srcElement;

                /**
                 * pageX / pageY：鼠标在页面中的坐标（包含滚动条）
                 * 在不支持 pageX/pageY 的浏览器中手动计算：
                 * clientX + 滚动条左边距(scrollLeft)，clientY + 滚动条上边距(scrollTop)
                 */
                var pageX = e.pageX || e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);
                var pageY = e.pageY || e.clientY + (document.documentElement.scrollTop || document.body.scrollTop);

                // clientX / clientY：鼠标在可视窗口中的坐标（不包括滚动条）
                var clientX = e.clientX;
                var clientY = e.clientY;

                // offsetX / offsetY：鼠标在当前元素内部的坐标（相对于左上角）
                var offsetX = e.offsetX;
                var offsetY = e.offsetY;

                // screenX / screenY：鼠标在屏幕上的绝对坐标
                var screenX = e.screenX;
                var screenY = e.screenY;

                // type：事件类型，这里是 "mousemove"
                var eventType = e.type;

                // timeStamp：事件发生的时间戳（从页面加载开始到事件触发所经过的毫秒数）
                var timestamp = e.timeStamp;

                /**
                 * 将获取到的信息显示在 showMsg 区域中
                 */
                showMsg.innerHTML =
                    "Target: " + target.id + "<br>" +
                    "Page Coordinates: x=" + pageX + ", y=" + pageY + "<br>" +
                    "Client Coordinates: x=" + clientX + ", y=" + clientY + "<br>" +
                    "Offset Coordinates: x=" + offsetX + ", y=" + offsetY + "<br>" +
                    "Screen Coordinates: x=" + screenX + ", y=" + screenY + "<br>" +
                    "Event Type: " + eventType + "<br>" +
                    "Timestamp: " + timestamp + " ms";
            };
        };
    </script>
</head>
<body>
<!-- 鼠标移动区域 -->
<div id="areaDiv"></div>

<!-- 显示事件信息的区域 -->
<div id="showMsg"></div>
</body>

<style>
    /* 设置 areaDiv 的样式 */
    #areaDiv {
        width: 200px;
        height: 100px;
        border: 1px solid black;
    }

    /* 设置 showMsg 的样式 */
    #showMsg {
        width: 300px;
        height: 120px;
        margin-top: 20px;
        border: 1px solid black;
    }
</style>
</html>
